<template>
  <v-touch
    @swipeleft="onAppSwipeleft"
    @swiperight="onAppSwiperight"
    @swipeup="onAppSwipeup"
    @swipedown="onAppSwipedown"
    :threshold="threshold"
    :swipe-options="options"
  >
    <slot></slot>
  </v-touch>
</template>
<script>
import SwipeTypes from './lib/swipeTypes'

export default {
  props: {
    threshold: {
      type: Number,
      default: 10,
    },
    options: {
      type: Object,
      default: () => {
        return {
          velocity: 0.02,
        }
      },
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    $processSlideback(evt, slideType) {
      var meta = this.$route.meta
      if (meta && meta.slideBack === false) {
        return
      }
      if (!slideType) {
        slideType = SwipeTypes.SwipeRight
      }
      if (
        (!meta.slideBackType && slideType === SwipeTypes.SwipeRight) ||
        (meta.slideBackType && meta.slideBackType[slideType])
      ) {
        if (this.$route.query.reffer) {
          this.$router.repalce(this.$route.query.reffer)
        } else {
          this.$router.return()
        }
      }
    },
    onAppSwipeleft(evt) {
      this.$root.$emit(SwipeTypes.Swipe, evt)
      this.$root.$emit(SwipeTypes.SwipeLeft, evt)
      this.$processSlideback(evt, SwipeTypes.SwipeLeft)
    },
    onAppSwiperight(evt) {
      this.$root.$emit(SwipeTypes.Swipe, evt)
      this.$root.$emit(SwipeTypes.SwipeRight, evt)
      if (evt.isCancel) {
        return
      }
      this.$processSlideback(evt)
    },
    onAppSwipeup(evt) {
      if (evt.velocityY > -1) {
        return
      }
      this.$root.$emit(SwipeTypes.Swipe, evt)
      this.$root.$emit(SwipeTypes.SwipeUp, evt)
      this.$processSlideback(evt, SwipeTypes.SwipeUp)
    },
    onAppSwipedown(evt) {
      if (evt.velocityY < 1) {
        return
      }
      this.$root.$emit(SwipeTypes.Swipe, evt)
      this.$root.$emit(SwipeTypes.SwipeDown, evt)
      this.$processSlideback(evt, SwipeTypes.SwipeDown)
    },
  },
}
</script>